<template>
  <div>
    <top-nav-bar :applyPageRoute="nowRouteTitle" :isShowBack="false"></top-nav-bar>
    <a-card :bordered="false" :bodyStyle="{ padding: '16px', height: '100%' }">
      <a-alert banner>
        <span slot="message"
          >短信发送规则，请前往“ 机构设置-规则设置 ”
          <a style="margin-left: 16px" @click="go">去设置>></a>
        </span>
      </a-alert>
      <a-row>
        <a-col :span="12">
          <div class="top-box">
            <div class="left">
              <div class="title">剩余可发送短信条数</div>
              <div class="num">{{SYnumber}}</div>
            </div>
            <div class="right">
              <!-- <a-button type="primary" style="margin-right: 8px"> 充值 </a-button> -->
              <a-button @click="recharge">充值记录</a-button>
            </div>
          </div>
        </a-col>
      </a-row>
      <div class="searh">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="发送日期：">
                <a-range-picker
                  :disabled-date="disabledDate"
                  format="YYYY-MM-DD"
                  style="width: 300px"
                  @change="dateChange"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="类型：">
                <a-select style="width: 300px" placeholder="请选择类型" @change="typeChange">
                  <a-select-option :value="index" v-for="(item, index) in typeList" :key="index">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div style="margin-top: 15px">
        <s-table
          ref="table"
          :columns="columns"
          :data="loadData"
          showPagination="auto"
          class="user_management_table"
          :pagination="pagination"
        ></s-table>
      </div>
    </a-card>
    <!-- 充值记录 -->
    <a-modal title="充值记录" :visible="visible" :footer="null" @cancel="visible = false" :width="750">
      <s-table :columns="columns1" :data="data" class="user_management_table" :pagination="pagination"> </s-table>
    </a-modal>
  </div>
</template>

<script>
import topNavBar from '@/components/topNavBar/topNavBar'
import moment from 'moment'
import { smsRecords, smsOrders, getTypeList,getInfo } from '@/api/shortMessage'
import { STable } from '@/components'
export default {
  name: 'CCC',
  components: {
    topNavBar,
    STable,
  },
  data() {
    return {
      nowRouteTitle: '',
      SYnumber:0,
      school_id: this.$store.state.user.school,
      typeList: [],
      pagination: {
        showTotal: (total) => `共${total}条数据`,
      },
      columns: [
        {
          title: '接收人',
          dataIndex: 'mobile',
          width: 200,
        },
        //   {
        //       title:'操作人',
        //       dataIndex: 'mobile',
        //   },
        //   {
        //       title:'发送条数',
        //       dataIndex: 'mobile',
        //   },
        {
          title: '发送时间',
          dataIndex: 'created_at',
          width: 200,
        },
        {
          title: '类型',
          dataIndex: 'type',
          width: 200,
        },
        {
          title: '短信类容',
          dataIndex: 'data',
        },
      ],
      query: {
        start_time: undefined,
        end_time: undefined,
        type: undefined,
      },
      loadData: (parameter) => {
        return smsRecords(Object.assign(parameter, { school_id: this.school_id }, this.query)).then((res) => {
          return res
        })
      },
      visible: false,
      loading: false,
      columns1: [
        {
          title: '创建时间',
          dataIndex: 'created_at',
        },
        {
          title: '订单编号',
          dataIndex: 'order_no',
        },
        {
          title: '充值前数量',
          dataIndex: 'number_before_value',
        },
        {
          title: '充值后数量',
          dataIndex: 'number_after_value',
        },
        {
          title: '充值数量',
          dataIndex: 'number_change_value',
        },
      ],
      data: (parameter) => {
        return smsOrders(Object.assign(parameter, { school_id: this.school_id })).then((res) => {
          return res
        })
      },
    }
  },
  created() {
    this.nowRouteTitle = this.$route.meta.title
    this.getTypeList()
    this.getNumber()
  },
  methods: {
    getNumber(){
      getInfo({school_id:this.$store.state.user.school}).then(res=>{
        let id=this.$store.state.user.school
        const schools=res.schools
        // if()
        schools.forEach(e => {
          if(e.id==id){
            this.SYnumber=e.sms_surplus
          }
        });
      })
    },
    getTypeList() {
      getTypeList({ school_id: this.school_id })
        .then((res) => {
          this.typeList = res
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        })
    },
    dateChange(m, s) {
      console.log(m, s)
      this.query.start_time = s[0]
      this.query.end_time = s[1]
      this.$refs.table.refresh(true)
    },
    typeChange(e) {
      this.query.type = e
      this.$refs.table.refresh(true)
    },
    disabledDate(current) {
      // Can not select days before today and today
      //   console.log(moment().endOf('day').add(1,'days').format('YYYY-MM-DD'),9);
      return current && current > moment().endOf('day').add(1, 'days')
    },
    back() {
      this.$router.go(-1)
    },
    go(){
      this.$router.push({
        name:'parents_client'
      })
    },
    recharge() {
      this.visible = true
      //   this.loading = true
      //   smsOrders({ school_id: this.school_id })
      //     .then((res) => {
      //       this.data = res.data
      //     })
      //     .catch((err) => {})
      //     .finally(() => {
      //       this.loading = false
      //     })
    },
  },
}
</script>

<style lang="less" scoped>
.top-box {
  margin-top: 20px;
  border: 1px solid #e8e8e8;
  padding: 30px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    // margin-right: 15px;
    .tilte {
      margin-bottom: 10px;
    }
    .num {
      font-size: 18px;
      font-weight: 700;
    }
  }
}
.searh {
  margin-top: 20px;
}
</style>